<!DOCTYPE HTML>
<html>
<head>
  <title>Graph2d | External legend Example</title>
  <link href="../../dist/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" />
  <style type="text/css">
    body, html {
      font-family: sans-serif;
    }

    .custom-style1 {
      fill: #f2ea00;
      fill-opacity:0;
      stroke-width:2px;
      stroke: #b3ab00;
    }

    .custom-style2 {
      fill: #00a0f2;
      fill-opacity:0;
      stroke-width:2px;
      stroke: #050092;
    }

    .custom-style3 {
      fill: #00f201;
      fill-opacity:0;
      stroke-width:2px;
      stroke: #029200;
    }

    path.custom-style3.fill {
      fill-opacity:0.5 !important;
      stroke: none;
    }

    .vis-graph-group0 {
      fill:#4f81bd;
      fill-opacity:0;
      stroke-width:2px;
      stroke: #4f81bd;
    }

    .vis-graph-group1 {
      fill:#f79646;
      fill-opacity:0;
      stroke-width:2px;
      stroke: #f79646;
    }

    .vis-graph-group2 {
      fill: #8c51cf;
      fill-opacity:0;
      stroke-width:2px;
      stroke: #8c51cf;
    }

    .vis-graph-group3 {
      fill: #75c841;
      fill-opacity:0;
      stroke-width:2px;
      stroke: #75c841;
    }

    .vis-graph-group4 {
      fill: #ff0100;
      fill-opacity:0;
      stroke-width:2px;
      stroke: #ff0100;
    }

    .vis-graph-group5 {
      fill: #37d8e6;
      fill-opacity:0;
      stroke-width:2px;
      stroke: #37d8e6;
    }

    .vis-graph-group6 {
      fill: #042662;
      fill-opacity:0;
      stroke-width:2px;
      stroke: #042662;
    }

    .vis-graph-group7 {
      fill:#00ff26;
      fill-opacity:0;
      stroke-width:2px;
      stroke: #00ff26;
    }

    .vis-graph-group8 {
      fill:#ff00ff;
      fill-opacity:0;
      stroke-width:2px;
      stroke: #ff00ff;
    }

    .vis-graph-group9 {
      fill: #8f3938;
      fill-opacity:0;
      stroke-width:2px;
      stroke: #8f3938;
    }

    .vis-fill {
      fill-opacity:0.1;
      stroke: none;
    }


    .vis-bar {
      fill-opacity:0.5;
      stroke-width:1px;
    }

    .vis-point {
      stroke-width:2px;
      fill-opacity:1.0;
    }


    .vis-legend-background {
      stroke-width:1px;
      fill-opacity:0.9;
      fill: #ffffff;
      stroke: #c2c2c2;
    }


    .vis-outline {
      stroke-width:1px;
      fill-opacity:1;
      fill: #ffffff;
      stroke: #e5e5e5;
    }

    .vis-icon-fill {
      fill-opacity:0.3;
      stroke: none;
    }

    div.description-container {
      float:left;
      height:30px;
      width:160px;
      padding-left:5px;
      padding-right:5px;
      line-height: 30px;
    }

    div.icon-container {
      float:left;
    }

    div.legend-element-container {
      display:inline-block;
      width:200px;
      height:30px;
      border-style:solid;
      border-width:1px;
      border-color: #e0e0e0;
      background-color: #ffffff;
      margin:4px;
      padding:4px;
      -webkit-touch-callout: none;
      -webkit-user-select: none;
      -khtml-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
      cursor:pointer;
    }
    div.legend-element-container.hidden {
      background-color: #d3e6ff;
    }

    svg.legend-icon {
      width:30px;
      height:30px;
    }

    div.external-legend {
      position:relative;
      margin-left: -5px;
      width: 900px;
    }
  </style>

  <script src="../../dist/vis.js"></script>

  </head>
<body>
<h2>Graph2d | External custom legend</h2>
<div style="width:800px; font-size:14px; text-align: justify;">
  This example shows how to create an external custom legend using the getLegend function. We use normal JavaScript to show and hide the
  groups by updating the dataset.

</div>
<br />
<div id="Legend" class="external-legend"></div>
<div id="visualization"></div>


<script type="text/javascript">
  // create a dataSet with groups
  var names = ['SquareShaded', 'Bargraph', 'Blank', 'CircleShaded'];
  var groups = new vis.DataSet();
  groups.add({
    id: 0,
    content: names[0],
    className: 'custom-style1',
    options: {
      drawPoints: {
        style: 'square' // square, circle
      },
      shaded: {
        orientation: 'bottom' // top, bottom
      }
    }});

  groups.add({
    id: 1,
    content: names[1],
    className: 'custom-style2',
    options: {
      style:'bar',
      drawPoints: {style: 'circle',
        size: 10
      }
    }});

  groups.add({
    id: 2,
    content: names[2],
    options: {
      yAxisOrientation: 'right', // right, left
      drawPoints: false
    }
  });

  groups.add({
    id: 3,
    content: names[3],
    className: 'custom-style3',
    options: {
      yAxisOrientation: 'right', // right, left
      drawPoints: {
        style: 'circle' // square, circle
      },
      shaded: {
        orientation: 'top' // top, bottom
      }
    }});

  var container = document.getElementById('visualization');
  var items = [
    {x: '2014-06-12', y: 0 , group: 0},
    {x: '2014-06-13', y: 30, group: 0},
    {x: '2014-06-14', y: 10, group: 0},
    {x: '2014-06-15', y: 15, group: 1},
    {x: '2014-06-16', y: 30, group: 1},
    {x: '2014-06-17', y: 10, group: 1},
    {x: '2014-06-18', y: 15, group: 1},
    {x: '2014-06-19', y: 52, group: 1},
    {x: '2014-06-20', y: 10, group: 1},
    {x: '2014-06-21', y: 20, group: 2},
    {x: '2014-06-22', y: 600, group: 2},
    {x: '2014-06-23', y: 100, group: 2},
    {x: '2014-06-24', y: 250, group: 2},
    {x: '2014-06-25', y: 300, group: 2},
    {x: '2014-06-26', y: 200, group: 3},
    {x: '2014-06-27', y: 600, group: 3},
    {x: '2014-06-28', y: 1000, group: 3},
    {x: '2014-06-29', y: 250, group: 3},
    {x: '2014-06-30', y: 300, group: 3}
  ];

  var dataset = new vis.DataSet(items);
  var options = {
    dataAxis: {showMinorLabels: false},
    start: '2014-06-09',
    end: '2014-07-03'
  };
  var graph2d = new vis.Graph2d(container, items, groups, options);


  /**
   * this function fills the external legend with content using the getLegend() function.
   */
  function populateExternalLegend() {
    var groupsData = groups.get();
    var legendDiv = document.getElementById("Legend");
    legendDiv.innerHTML = "";

    // get for all groups:
    for (var i = 0; i < groupsData.length; i++) {
      // create divs
      var containerDiv = document.createElement("div");
      var iconDiv = document.createElement("div");
      var descriptionDiv = document.createElement("div");

      // give divs classes and Ids where necessary
      containerDiv.className = 'legend-element-container';
      containerDiv.id = groupsData[i].id + "_legendContainer"
      iconDiv.className = "icon-container";
      descriptionDiv.className = "description-container";

      // get the legend for this group.
      var legend = graph2d.getLegend(groupsData[i].id,30,30);

      // append class to icon. All styling classes from the vis.css/vis-timeline-graph2d.min.css have been copied over into the head here to be able to style the
      // icons with the same classes if they are using the default ones.
      legend.icon.setAttributeNS(null, "class", "legend-icon");

      // append the legend to the corresponding divs
      iconDiv.appendChild(legend.icon);
      descriptionDiv.innerHTML = legend.label;

      // determine the order for left and right orientation
      if (legend.orientation == 'left') {
        descriptionDiv.style.textAlign = "left";
        containerDiv.appendChild(iconDiv);
        containerDiv.appendChild(descriptionDiv);
      }
      else {
        descriptionDiv.style.textAlign = "right";
        containerDiv.appendChild(descriptionDiv);
        containerDiv.appendChild(iconDiv);
      }

      // append to the legend container div
      legendDiv.appendChild(containerDiv);

      // bind click event to this legend element.
      containerDiv.onclick = toggleGraph.bind(this,groupsData[i].id);
    }
  }

  /**
   * This function switchs the visible option of the selected group on an off.
   * @param groupId
   */
  function toggleGraph(groupId) {
    // get the container that was clicked on.
    var container = document.getElementById(groupId + "_legendContainer")
    // if visible, hide
    if (graph2d.isGroupVisible(groupId) == true) {
      groups.update({id:groupId, visible:false});
      container.className = container.className + " hidden";
    }
    else { // if invisible, show
      groups.update({id:groupId, visible:true});
      container.className = container.className.replace("hidden","");
    }
  }

  populateExternalLegend()

</script>
</body>
</html>
